<!DOCTYPE html>
<html class="x-admin-sm" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="x-body">
    <div class="layui-row">
        <div class="demoTable">
            <div class="layui-row">
                <button id="add" class="layui-btn add" ><i class="layui-icon"></i>添加价格
                </button>
                <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                   href="javascript:location.replace(location.href);" title="刷新">
                    <i class="layui-icon" style="line-height:30px">刷新</i></a>
            </div>
        </div>
                <div class="layui-row">
                    <form class="layui-form layui-col-md12  layui-form-pane">
                        <div class="layui-form-item">
                            <div class="layui-input-inline" >
                                <select name="rtid" id="roomType">
                                    <option value="">房间类型</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input class="layui-input" placeholder="请选择时间" name="time" id="searchTime" autocomplete="off">
                            </div>
                            <button type="button" class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

</div>

<!--编辑页面,id和渲染的table进行了区分-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="update" action="" style="margin-top:20px" >

            <input type="hidden" name="id" id="idP"  autocomplete="off" >
            <div class="layui-form-item">
                <label for="roomTypeP" class="layui-form-label">
                    房间类型
                </label>
                <div class="layui-input-inline">
                    <select id="roomTypeP" name="rtid" lay-verify="required" >
                    </select>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" id="roomPrice" required  lay-verify="required|number" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-block">
                    <input type="text" name="time" id="time" required  lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" id="remarkP" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="edit">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--添加房间价格页面-->
<div class="x-body" style="display:none;" id="addPricePage">
    <form class="layui-form" id="addPage">
  <!--      <input type="hidden" name="id" id="id"  autocomplete="off" >-->

        <div class="layui-form-item">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-block">
                <select name="rtid" id="rtid">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间价格</label>
            <div class="layui-input-block">
                <input type="text" name="Price" id="rPrice" lay-verify="required|number" autocomplete="off" placeholder="" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <input type="text" name="time" id="timePrice" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" id="remarkPrice" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top:40px">
            <div class="layui-input-block">
                <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="add">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<script>
    layui.use(['form', 'jquery', 'table','laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            laydate = layui.laydate;
            table = layui.table;

        //搜索不同时间价格 日期时间选择器
        laydate.render({
            elem: '#searchTime'
        });
        //添加房间价格编辑页面 日期时间选择器
        laydate.render({
            elem: '#timePrice'
        });
        //每条记录编辑信息页面 日期时间选择器
        laydate.render({
            elem: '#time'
        });
        //根据返回的房间类型设置下拉框中房间类型的值
        var roomType;
        $.get({
            url: '/roomType/list',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                roomType = res.data;
                var selectType = $("#roomType");
                roomType.forEach(function (ele, index) {
                    var option = $('<option></option>');
                    //如果该类型在下拉框中没有，则添加
                    if ($('#roomType option[value=' + ele['id'] + ']').length == 0) {
                        option.val(ele['id']);
                        option.text(ele['roomType']);
                        option.appendTo(selectType);
                    }
                    form.render('select');
                });

            }
        });
        //点击添加按钮，弹出编辑页面
        $("#add").click(function () {
            var w=($(window).width()*0.4);
            var h=($(window).height() - 70);
            console.log('w:'+w+',h:'+h);
            layer.open({
                type: 1,
                area: [w+'px', h +'px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade:0.4,
                title: "添加",
                content: $("#addPricePage"),
                success: function(){
                   $("#rtid").append($('#roomType option').clone());
                   form.render('select');
                }
            });
        });

        var tableIns = table.render({
            id: 'testId'
            , elem: '#test'
            , url: '/roomPrice/list' //待修改
            , toolbar: '#toolbarDemo'
            , page: true   //设置分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , cols: [ [ {type: 'checkbox', width:'10%',fixed: 'left'}
                , {field: 'id', title: 'ID',width:'12%', sort: true, unresize: true}
                , {field: 'roomType', title: '房间类型',width:'15%', sort: true, unresize: true}
                , {field: 'price', title: '房间价格', width:'13%',sort: true, unresize: true}
                , {field: 'time', title: '时间', width:'17%',sort: true, unresize: true}
                , {field: 'remark', title: '描述', width:'15%',sort: true, unresize: true}
                , {fixed: 'right', title: '操作',width:'18%', toolbar: '#barDemo', unresize: true}
            ] ]
        });
        form.on('submit(search)', function (data){
            console.log("data",data);
            tableIns.reload({
                where:data.field
            });
        });
        form.on('submit(add)', function (data){
            console.log("data",data.field);
            $.ajax({
                url:"/roomPrice/addSave",
                data:$("#addPage").serialize(),
                type: 'POST',
                success:function (res) {
                    if (res.status==0){
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.alert("添加成功", {icon: 6},function () {
                            layer.closeAll();//关闭所有的弹出层
                            tableIns.reload();
                        });
                    }else{
                        layer.alert("添加失败", {icon: 5});
                    }
                }
            })
        });

        /*每行操作按钮*/
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //  console.log(data);
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //   var checkStatus = table.checkStatus('#test'); //idTest 即为基础参数 id 对应的值
                    $.post("/roomPrice/remove", {'ids': data.id}, function (res) {
                        if (res.status == 0) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        }
                        else {

                            layer.alert("修改失败", {icon: 5})
                        }
                    });

                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                // var url='/roomType/edit';
                var w=($(window).width()*0.5);
                var h=($(window).height() - 70);

                layer.open({
                    type: 1,
                    area: [w+'px', h +'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade:0.4,
                    title: "编辑",
                    content: $("#popUpdateTest"),
                    success: function(){
                        $("#roomTypeP").append($('#roomType option').clone());
                        if (data.rtid==null)
                            data.rtid==-1;
                        $('#roomTypeP option[value='+data.rtid+']').prop('selected',true);
                        form.render('select');
                        $('#roomPrice').val(data.price);
                        $('#time').val(data.time);
                        $('#remarkP').val(data.remark);
                        $('#idP').val(data.id);
                    }
                });
                setFormValue()

            }
        });

        function setFormValue(){
            form.on('submit(edit)', function(message) {
                console.log($('#update').serialize());
                $.ajax({
                    url:'/roomPrice/edit',
                    type:'POST',
                    data: $('#update').serialize(),
                    success:function (res) {
                        if(res.status==0){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.alert("修改成功", {icon: 6},function () {
                                layer.closeAll();//关闭所有的弹出层
                                tableIns.reload();
                            });
                        }else{
                            layer.alert("修改失败", {icon: 5});
                        }
                    },
                    error:function (xhr) {
                        console.log(xhr);
                    }
                })
            })

        }

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delAll':
                    layer.confirm('真的删除行么', function (index) {
                        var arr = [];
                        var data = checkStatus.data;
                        $.each(data, function (idx, obj) {
                            arr.push(obj.id);
                        });
                        //发异步
                        $.post("/roomPrice/remove", {'ids': arr.toString()}, function (res) {
                            if (res.status == 0) {
                                tableIns.reload();
                            }
                            else {
                                layer.alert("修改失败", {icon: 5})
                            }
                        });
                        layer.close(index);
                    })

                    break;
            };
        });
    })
    ;
    /*end use*/



</script>

<!--操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="system:roomPrice:edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="system:roomPrice:remove">删除</a>
</script>
<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll" shiro:hasPermission="system:roomPrice:edit"><i class="layui-icon"></i>批量删除</button>
    </div>
</script>


</body>
</html>